import React from 'react';
import styled from 'styled-components';

const Wrapper = styled.div`
  display: grid;
  place-items: center;
  gap: 2rem;
  margin: 2rem auto 0;
  padding: 2rem;
`

type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
  color: string;
}

const Input: React.FC<InputProps> = (props) => {
  const { color } = props
  return (
    <div style={{border: `1px solid ${color}`}}>
      <input {...props} />
    </div>
  )
}

const IconA = () => (<span>*</span>)
const IconB = () => (<span>$</span>)

type ButtonProps =React.ButtonHTMLAttributes<HTMLButtonElement> & {
  color: string;
  icon?: React.ReactElement; // JSX.Element | React.ReactNode
}

const Button: React.FC<ButtonProps> = (props) => {
  return (
    <div>
      <button style={{color: props.color}} {...props}>
        Button
        {props.icon}
      </button>
    </div>
  )
}

export default function Demo() {
  return (
    <Wrapper>
      <Button color="red" icon={IconA()} ></Button>
      <Button color="green" icon={<IconB />} ></Button>
      <Input color="blue" placeholder="holder" />
    </Wrapper>
  );
}

